import { defineComponent } from 'vue'
import { useRouter } from 'vue-router'
import { Layout, Dropdown, Menu } from 'ant-design-vue'
import { CommonStore } from '@/store/modules/common'
import UserApi from '@/api/user.ts'
import { MenuFoldOutlined, MenuUnfoldOutlined, CaretDownOutlined, BellFilled, QuestionCircleFilled } from '@ant-design/icons-vue'

import styles from './index.module.less'
import Logo from '../../assets/logo.png'
import UserIcon from '../../assets/head.jpg'

const GlobalHeader = defineComponent({
	name: 'GlobalHeader',
	setup() {
		const router = useRouter()
		const common = CommonStore()
		// 退出
		const exit = async () => {
			await UserApi.logout({})
			router.push('/login')
		}
		const menuSlots = {
			overlay: () => (
				<Menu>
					<Menu.Item>
						<span onClick={exit}>退出</span>
					</Menu.Item>
				</Menu>
			)
		}
		const handleInlineCollapsed = () => {
			common.setInlineCollapsed()
		}
		return () => (
			<div class={styles['header-animat']}>
				<Layout.Header>
					<div class="menu-fold" onClick={handleInlineCollapsed}>
						{common.inlineCollapsed ? <MenuUnfoldOutlined class="menu-fold-icon" /> : <MenuFoldOutlined class="menu-fold-icon" />}
					</div>
					<div class="right-con">
						<QuestionCircleFilled class="help-lined" />
						<BellFilled class="bell-lined" />
						<div class="user-info">
							<Dropdown v-slots={menuSlots}>
								<div>
									<img src={UserIcon} class="user-head" />
									<CaretDownOutlined class="down-lined" />
								</div>
							</Dropdown>
						</div>
					</div>
				</Layout.Header>
			</div>
		)
	}
})

export default GlobalHeader
